<template>
    <div>
        <!-- 选择收货人部分 -->
        <el-card class="box-card" style="height:200px">
            <el-row>
                <el-col :span="12">
                    <div class="text" >
                        <h1>选择收获地址</h1>
                        <br>
                        <el-select v-model="addressvalue" placeholder="请选择收货人信息"  @change="selectChange(addressvalue)" style="width:50%">
                            <el-option
                                v-for="(user,index) in addressArray"
                                :key="user.id"
                                :value="index">
                                <p style="font-weight: bold">
                                    收货人:
                                    <span style="font-weight: 400;">{{user.username}}</span>
                                    手机号:
                                    <span style="font-weight: 400;">{{user.userphone}}</span>
                                    收货地址:
                                    <span style="font-weight: 400;">{{user.address}}</span>
                                </p>
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <h1>地址信息</h1>
                    <br>
                    <p><span style="font-weight: bold">收货人：</span><span v-if="addressvalue!==''">{{addressArray[addressvalue].username}}</span></p><br>
                    <p><span style="font-weight: bold">手机号：</span><span v-if="addressvalue!==''">{{addressArray[addressvalue].userphone}}</span></p><br>
                    <p><span style="font-weight: bold">收货地址：</span><span v-if="addressvalue!==''">{{addressArray[addressvalue].address}}</span></p>
                </el-col>
            </el-row>

        </el-card>
        <!-- 存放商品部分 -->
        <el-card class="box-card" >
            <div style="max-height: 700px">
                <div class="clearfix" v-for="(dish,index) in dishArray" :key="index" style="height: 180px;border-bottom: 1px #E5E5E5 solid;">
                    <img class="clearfix" :src="dish.picture" style="height:150px;width:150px;cursor: pointer;border-radius: 10px;float: left;margin:15px">
                    <div class="clearfix" style="cursor: pointer;float: left;height: 150px;margin: 15px 0;position: relative;width: 75%">
                        <h1 style="">{{dish.name}}</h1>
                        <div style="position: absolute;bottom: 10px;width: 100%">
                            <span>口味：</span> <span v-text="dish.taste"></span><br>
                            <span style="font-size:15px">菜品数量：<span v-text="dish.quantity"></span></span>
                        </div>
                        <p style="float: right;position:absolute;bottom: 10px;right: 40px"><span>价格：</span>￥{{(dish.price*dish.quantity).toFixed(2)}}</p>
                    </div>
                </div>
            </div>
            <div style="margin-top: 20px;text-align: right">
                <p style="display: inline-block;line-height: 40px">总金额：<span class="priceValSpan">￥{{value.toFixed(2)}}</span></p>
                <el-button style="margin-left: 20px" type="primary" @click="sub">前往付款</el-button>
            </div>
        </el-card>


    </div>

</template>

<script>
import store from '@/api/storeSearch.js'
export default {
    props: ['obj'],
    data(){
        return{
            //商品标题   取店铺名称
            subject:'',
            //订单编号
            traceNo:'',
            //总价钱
            totalAmount:'',
            //################################
            //商品总价
            value:0,
            //select绑定的Key
            addressvalue:'',
            //全部收货地址
            addressArray:[],
            //商品集合
            dishArray:[],
            subarr:[],
            orderArray:{         
                //餐品名称
                dishname:'',
                //餐品单价
                dishprice:0,
                //数量
                number:'',
                //总价
                totalprice:'',
                //点餐时间
                dishtime:'',
                //用户id
                userid:'',
                //店铺id
                sid:'',
                //店铺名称
                shopname:'',
                //店家手机号
                shopphone:'',
                //用户手机号    下单手机号  收外卖手机号
                userphone:'',
                //收货地址
                useraddress:'',
                userName:'',
                orderTotalPrice:'',
            },
        }
    },
    methods:{
        selectChange(addressvalue){
            //给订单数组赋值
            //用户ID
             this.orderArray.userId= this.addressArray[addressvalue].eid
             //收货地址
             this.orderArray.useraddress= this.addressArray[addressvalue].address
             //收货人手机号
             this.orderArray.userphone= this.addressArray[addressvalue].userphone
             this.orderArray.userName=this.addressArray[addressvalue].username
             this.orderArray.userid=this.addressArray[addressvalue].id
             this.orderArray.orderTotalPrice=this.value
             for(let i=0;i<this.dishArray.length;i++){
                 this.orderArray.dishname=this.dishArray[i].name;
                 this.orderArray.dishprice=this.dishArray[i].price;
                 this.orderArray.number=this.dishArray[i].quantity;
                 this.orderArray.totalprice=this.dishArray[i].price*this.dishArray[i].quantity;
                 this.orderArray.sid=this.dishArray[i].sid;
                 //解决对象覆盖问题
                 let obj =  Object.assign({},this.orderArray);
                 this.subarr.push(obj);
             }
             console.log(this.subarr)
        },
        //付款
        sub(){
            if(this.orderArray.userId==="" || this.orderArray.userAddress==="" || this.orderArray.userPhone===""){
                this.$message({
                    message: '请选择收货人！',
                    type: 'error'
                })
            }else{
                store.subOrder(this.subarr).then((res)=>{
                  this.traceNo = res.data.data
                  this.subject = this.traceNo;
                  window.open('http://localhost:8888/alipay/pay?subject='+this.subject+'&traceNo='+this.traceNo+'&totalAmount='+this.totalAmount)
                })
            }
        }

    },
    created(){
        let id = sessionStorage.getItem('uid')
        //获取用户所添加的所有地址数据
        store.findByEid(id).then(res=>{
            this.addressArray=res.data.data
        });
        //所有商品数据
        let dishList = decodeURIComponent(this.$route.params.orderList)
        this.dishArray=JSON.parse(dishList)
        console.log(this.dishArray)
        //获得总价
        for(var i=0;i<this.dishArray.length;i++){
           var thisval=this.dishArray[i].price*this.dishArray[i].quantity;
           this.value+=thisval
        }
        this.totalAmount = this.value.toFixed(2);

    }
}
</script>
<style scoped>
    .clearfix:after {
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }
    .box-card {
        width: 80%;
        margin: 0 auto;
        margin-top: 20px;
    }
    .el-button{
        float:right;
        margin-bottom: 20px;
        margin-right: 65px;
    }
    .priceSpan{
        position: relative;
        top: 14px ;
        left: 70%;
    }
    .priceValSpan{
        color: red;
    }
</style>